.neo-accordion-item {
  box-shadow: var(--accordion-item-shadow);
  background-color: var(--accordion-item-bg-color);
  border: 1px solid var(--accordion-item-border-color);
  border-radius: var(--accordion-item-radius);

  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
  max-height: var(--accordion-item-header-height);

  overflow: hidden;

  &:not(:first-child) {
    margin-top: 15px;
  }

  & > div {
    background-color: transparent;
  }

  &.neo-expanded {
    max-height: 1000px;
    transition: max-height 1s ease-in-out;

    .neo-toolbar {
      border-bottom-color: var(--accordion-item-border-color);

      .neo-accordion-header-arrow::before {
        transform: rotate(0deg);
      }
    }
  }

  &.neo-scrollable {
    .neo-accordion-content {
      overflow: auto;
    }
  }

  .neo-toolbar {
    max-height: var(--accordion-item-header-height);
    min-height: var(--accordion-item-header-height);
    border-bottom: 1px solid transparent;

    .neo-accordion-header-icon {
      &::before {
        margin: 0 15px 0 10px;
      }

      &.no-icon {
        margin-left: 10px;
      }
    }

    .neo-accordion-header-title {
      flex: 1 !important;
      font-weight: 600;
    }

    .neo-accordion-header-arrow {
      background-color: var(--accordion-item-arrow-bg-color);
      height: 30px;
      width: 30px;
      border-radius: var(--accordion-item-radius);
      box-shadow: var(--accordion-item-arrow-shadow);
      padding: 7px;
      text-align: center;


      &::before {
        display: inline-block;
        transform: rotate(-180deg);
        transition: transform .5s ease-out;
      }
    }
  }

  .neo-accordion-content {
    background-color: var(--accordion-item-content-bg-color);
    border-bottom-left-radius: var(--accordion-item-radius);
    border-bottom-right-radius: var(--accordion-item-radius);
    padding: 15px;
  }
}
